<!-- 选择堆场 -->
<template>
    <el-select ref="selectRef" v-model="param.selectYard" :remote-method="getYardListData" :multiple="config.multiple" :loading="param.loading" clearable filterable remote 
    :disabled="config.disabled" :collapse-tags="config.collapsetags" @change="yardChange" placeholder="输入过滤下拉选择" style="width:100%">
        <template v-if="config.isIcon" #prefix><el-icon><MapLocation /></el-icon></template>
        <el-option v-for="(item,index) in param.yardOptions"  :key="index" :label="item.yardName" :value="item.id"/>
    </el-select>
</template>

<script lang="ts" setup>
import {reactive, ref, watch, onMounted, computed} from 'vue'
import { getYardList } from '@/api/boxManage/yard'; // 引入城市接口

const emit = defineEmits(['yardId'])

const props = defineProps({
    config: {
        type: Object,
        default: () => {}
    },
    reqType:{ // 用来区别使用时什么参数查询堆场  yardName:堆场名称  yardNum:堆场编号 tel:堆场联系电话
        type: String,
        default: 'yardName'
    },
    selectYardId:{ // 当前选中堆场id
        type: String,
        default: ''
    },
    selectYardName:{ // 当前选中堆场名称
        type: String,
        default: ''
    },
    selectYardTel:{ // 当前选中堆场电话
        type: String,
        default: ''
    },
    inIransit:{ //可选堆场是否添加 在途 选项
        type:Boolean,
        default: false
    }
})

onMounted(() => {
   
})
// 获取城市列表
const selectRef = ref()
const param = reactive({
  loading: false,
  yardOptions: [],
  selectYard: props.reqType == "yardName" ? props.selectYardName : ( props.reqType == "yardNum" ? props.selectYardId : props.selectYardTel )
})



// 监听更新param.selectYardName
watch(() => props.selectYardName, (val: any) => {
    // const cityListInfo = localStorage.getItem('cityList')
    // param.yardOptions = JSON.parse(cityListInfo)
    param.selectYard = val
}, { deep: true })

const getYardListData = async (query: string) => {
    if (!query) return 
    let reqParams = {}
    if(props.reqType == "yardName"){
        reqParams.yardName = query
    }else if(props.reqType == "yardNum"){
        reqParams.yardNum = query
    }else if(props.reqType == "tel"){
        reqParams.tel = query
    }
    param.loading = true
    getYardList(reqParams).then((res: any) => {
        param.yardOptions = res.data
        if(props.config.inIransit){
            let zaiTu = {
                id: "1", 
                yardName: "在途", 
                tel: "--", 
                priceList: [{aa:"111"}]
            }
            param.yardOptions.push(zaiTu)
        }
        
        param.loading = false
    })
}

const yardChange = (select: any) => {
  const selectInfo = param.yardOptions.filter(item => item.id == select); 
    emit('yardId',selectInfo)
}

</script>
<style lang="scss" scoped></style>